<template>
  <div class="c-pt120 c-ph24 c-p bg-F6F7FB pb360">
    <div class="bg c-w100 c-pa c-p-l0 c-p-t0 c-pz2"></div>
    <div class="c-p c-pz2 c-pt16">
      <p class="c-fs24 c-fc-white c-mb80" v-if="wxEcShopAppName">来自{{wxEcShopAppName}}</p>
      <div class="c-flex-row c-alignc-center c-justify-sb fc-FF6722">
        <div class="c-flex-column c-justify-center c-ww192 c-hh80 c-aligni-center c-br-tl16 c-br-tr16 c-p" :class="tabIndex == 1 ? 'c-fw-b c-bg-white' : 'bg-FFEBC7'">
          <p class="c-fs18 c-mb4">第1步</p>
          <p class="c-fs24">填写信息</p>
          <div class="icon iconfont c-fs16 c-fc-white c-pa c-p-b0 c-p-r0 c-textAlign-c" v-if="tabIndex == 2">&#xe76c;</div>
        </div>
        <div class="c-flex-column c-justify-center c-ww192 c-hh80 c-aligni-center c-br-tl16 c-br-tr16 c-p" :class="tabIndex == 2 ? 'c-fw-b c-bg-white' : 'bg-FFEBC7'">
          <p class="c-fs18 c-mb4">第2步</p>
          <p class="c-fs24">识别二维码</p>
        </div>
        <div class="c-flex-column c-justify-center c-ww192 c-hh80 c-aligni-center c-br-tl16 c-br-tr16 c-p bg-FFEBC7">
          <p class="c-fs18 c-mb4">第3步</p>
          <p class="c-fs24">绑定</p>
        </div>
      </div>
      <div class="c-w100 c-bg-white c-br-bl16 c-br-br16 c-ph24 c-pt60 c-pb40 c-w100 c-flex-column mt-2 c-p c-pz1" v-if="tabIndex == 1">
        <div class="c-fs28 c-fc-xblack c-fw-b c-textAlign-c">填写信息</div>
        <div class="c-hh88 c-flex-row c-aligni-center c-fs26 c-bd-b1 c-pb24">
          <div class="c-fc-sblack"><span class="c-fc-xxmred">*</span> 微信号</div>
          <input type="text" v-model="username" placeholder="请输入微信号" class="c-w0 c-flex-grow1 c-bd0 c-textAlign-r c-fc-xblack c-fs26"/>
        </div>
        <div class="c-fs20 c-fc-gray c-mb40 c-mt30">
          进入 <span class="c-fw-b">我-个人中心-微信号</span> 长按复制
        </div>
        <div class="bgFF6722 c-mt80 c-hh64 c-textAlign-c c-fs26 c-fw-b c-fc-white c-lh64 c-br32" @click="addSharer">提交申请</div>
      </div>
      <div class="c-w100 c-bg-white c-br-bl16 c-br-br16 c-ph24 c-pt60 c-pb40 c-w100 c-flex-column c-aligni-center mt-2 c-p c-pz1" v-if="tabIndex == 2">
        <div class="c-fs28 c-fc-xblack c-fw-b c-textAlign-c">邀请您成为分享员</div>
        <div class="c-fc-sblack c-mt30 c-fs26 c-textAlign-c"> 推广商品赚佣金</div>
        <img :src="'data:image/png;base64,' + bindImg" class="c-hh240 c-ww240 c-mt40 c-mb30" alt="">
        <div class="c-fs20 c-fc-gray">长按图片识别二维码，立即成为分享员</div>
      </div>
    </div>
    <div class="c-pf c-maxw640 c-mlr-auto c-p-b0 c-p-l0 c-ph24 c-fc-xxmred c-fs20 c-lh28 c-pv10 tig c-mlr-auto">申请成为分享员期间请勿关闭该页面，按照3步操作即可申请成功，否则会申请失败</div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: 'sharerAdd',
  components: {
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      dataList: [],
      tabIndex: 1, // tab
      username: '', // 用户微信名
      isLoad: false,
      bindImg: '', // 分享员二维码
      status: 1, // 0-未绑定，1-已绑定 2-待接受邀请
      wxEcShopAppName: ''
    }
  },
  created() {
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    changeTab(tab) {
      this.tabIndex = tab;
    },
    // 添加分享员
    addSharer() {
      if (this.isLoad) return
      this.isLoad = true;
      let data = {
        username: this.username,
        wxEcShopAppId: this.wxEcShopAppId
      }
      utilJs.postMethod(`${global.apiurl}wxecshop/sharerAdd`, data, (res) => {
        this.bindImg = res.bindImg;
        this.tabIndex = 2;
        this.isLoad = false;
      }, failres => {
        this.isLoad = false;
        this.$showCjToast({
          text: failres.data.msg,
          type: "warn",
        });
      });
    },
    // 同步分享员数据
    searchSharer() {
      let data = {
        username: this.username,
        wxEcShopAppId: this.wxEcShopAppId
      }
      utilJs.postMethod(`${global.apiurl}wxecshop/searchSharer`, data, (res) => {
        if (res.status == 1) {
          this.$routerGo(this, "push", { path: "/homePage/wxecshop/wxecshopList" });
        }
      }, failres => {
      });
    },
    // 获取视频号小店信息
    sharerInfo() {
      utilJs.getMethod(`${global.apiurl}wxecshop/sharerInfo?wxEcShopAppId=${this.wxEcShopAppId}`, res => {
        this.wxEcShopAppName = res.wxEcShopAppName;
        this.status = res.status;
        this.username = res.username;
        // 如果status返回1，直接回到列表
        // 返回status2，请求同步接口，同步接口status返回1，回到列表
        if (this.status == 1) {
          this.$routerGo(this, "push", { path: "/homePage/wxecshop/wxecshopList" });
        } else if (this.username && this.status != 1) {
          this.searchSharer();
        }
      }, failres => {
      });
    },
    goPromotionSwiper() {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/promotionImgs" });
    },
    goSharerAdd() {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/sharerAdd" });
    },
  },
  activated() {
    setDocumentTitle('视频号分享员');
    this.username = this.$route.query.username || '';
    this.wxEcShopAppId = this.$route.query.wxEcShopAppId || '';
    this.status = this.$route.query.status || '';
    this.tabIndex = 1;
    this.isLoad = false;
    this.wxEcShopAppName = this.$route.query.wxEcShopAppName || '';
    if (this.status == 1) {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/wxecshopList" });
      return
    }
    if (this.$route.query.username) {
      this.searchSharer();
    }
    if (!this.$route.query.wxEcShopAppName && !this.$route.query.status) {
      this.sharerInfo()
    }
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/wxshopBg1.png');
  background-size: 100% 100%;
  background-position: center;
  height: 17.3rem;
}
.fc-FF6722 {
  color: #FF6722;
}
.bg-F6F7FB {
  background-color: #F6F7FB;
}
.bg-FFEBC7 {
  background-color: #FFEBC7;
}
.tig {
  background-image: linear-gradient(270deg, #FEF2EB 0%, #FCE9F6 100%);
}
.bgFF6722 {
  background-color: #FF6722;
}
.mt-2 {
  margin-top: -0.05rem
}
.icon {
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  background-image: linear-gradient(90deg, #FF8526 0%, #FFC256 100%);
  border-radius: 0.4rem 0 0 0;
}
.pb360 {
  padding-bottom: 9rem;
}
/deep/ input::-webkit-input-placeholder {
  color: #ccc;
}
/deep/ input::-moz-input-placeholder {
  color: #ccc;
}
/deep/ input::-ms-input-placeholder {
  color: #ccc;
}
</style>
